import React, { Component } from 'react';

const SonComponent = (msg) => {
  return (WrappedComponent) => {
    return class SonHoc extends Component {
      render() {
        console.log(msg);
        return <WrappedComponent {...this.props} />
      }
    }
  }
}

const PureComponent = (props) => (
  <div>
    {
      props.list.map((item, index) => {
        return <p key={index}>{item}</p>
      })
    }
  </div>
)


class RenderCallbackCmp extends Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: 'hello'
    }
  }

  render() {
    return <div>
      aaaaa
    {
        this.props.children(this.state.msg)
      }
      bbbbbb
    </div>
  }
}

const ParentComponent = () => (
  <RenderCallbackCmp>
    {
      msg => <div><p>{msg}</p><p>{msg}</p></div>
    }
  </RenderCallbackCmp>
)

class Component1 extends Component {
  constructor(props) {
    super(props)
    console.log("constructor run")
    this.state = {
      list: ["a", "b", "c"],
      stateName: 'default state name'
    }
  }

  static defaultProps = {
    propName: 'propName'
  }

  //componentWillMount(){
  // console.log("componentWillMount run", window, document)
  //}

  componentDidMount() {
    console.log("componentDidMount run", this)

    let controller = new AbortController();
    let signal = controller.signal;
    // 超时函数
    const timeoutAction = timer => {
      return new Promise(reslove => {
        setTimeout(() => {
          // 实例化超时响应json数据
          const response = new Response(
            JSON.stringify({
              code: 1,
              msg: `timeout ${timer}s`
            })
          );
          reslove(response);
          controller.abort(); // 发送终止信号
        }, timer * 1000);
      });
    };
    const url = "/test.json"; // "//pages.springtour.com/w/home/queryAllCity"; // 请求的url

    // 执行，超时控制在0秒，让它永远超时，方便观察
    Promise.race([
      timeoutAction(0),
      fetch(url, {
        signal: signal //设置信号
      })
    ])
      .then(res => {
        return res.json();
      })
      .then(res => {
        if (res.code !== 0) {
          return alert(res.msg);
        } else {
          return console.log(res);
        }
      });

  }

  //componentWillReceiveProps(nextProps) {
  //  console.log("componentWillReceiveProps run")
  //}

  shouldComponentUpdate(nextProps, nextState) {
    return true;
    console.log("shouldComponentUpdate run")
  }

  //componentWillUpdate(nextProps, nextState){
  // 这里还可以修改state 的最后机会
  //  console.log("componentWillUpdate run")
  //       return false;
  //}

  componentWillUnmount() {
    console.log("componentWillUnmount run")
  }


  handleClickTest(b) {
    this.setState({
      stateName: 'default state name'
    })
  }

  static getDerivedStateFromProps(props, state) {
    console.log("getDerivedStateFromProps run", this)
    return false;
  }

  //getSnapshotBeforeUpdate(prevProps, prevState) {
  // console.log("getSnapshotBeforeUpdate run")
  // return false;
  //}

  componentDidUpdate() {
    console.log("componentDidUpdate run")
  }

  componentDidCatch(error, info) {
    console.log(error)
  }

  render() {
    console.log("render run", this)
    return <div>
      <button onClick={this.handleClickTest.bind(this)} >点击跟新</button>
      <ParentComponent />
    </div>
  }
}

export default Component1